<template> 
  <div :class="colClassName" @click.native.stop="conf.mode === 'designer'&&activeFormItem&&activeFormItem(item)">
    <template v-if="conf.mode==='designer'">
      <span class="drawing-item-delete" @click="deleteItem(index, parent)" title="删除">
        c
      </span>
      <span class="drawing-item-copy" @click="copyItem(item, parent)" title="复制">
        d
      </span>
    </template>
    {{components[item.tag]}}

    <component v-if="components[item.tag]" :is="components[item.tag]" v-bind="$attrs" :item="item" :active-id="activeId" :conf="conf"></component>

    <render-form-item v-else :active-id="activeId" :item="item" :conf="conf"></render-form-item>

  </div> 
</template>
  
<script setup name="drag-item">
import { defineAsyncComponent, computed, inject, provide } from 'vue'

const RenderFormItem = defineAsyncComponent(() => import('./RenderFormItem.vue'))

import MyCard from './Elements/Layout/MyCard'
import MyDataTable from './Elements/Layout/MyDataTable'
import MyRow from './Elements/Layout/MyRow'
import MyTable from './Elements/Layout/MyTable'
import MyTableCell from './Elements/Layout/MyTableCell'

let components = {
  'my-card': MyCard,
  'my-data-table': MyDataTable,
  'my-row': MyRow,
  'my-table': MyTable,
  'table-cell': MyTableCell,
}

const props = defineProps({
  parent: Object,
  activeId: String || Number,
  item: Object,
  conf: Object,
  index: String || Number,
})

const activeFormItem = inject('activeFormItem')
provide('activeFormItem', activeFormItem)
const copyItem = inject('copyItem')
const deleteItem = inject('deleteItem')
 

let colClassName = computed(() => {
  if(props.conf.mode === 'designer')
  {
  return props.conf.activeId === props.item.formId ? 'drawing-item active-form-item' : 'drawing-item '
  }
  return ''
})
</script>